<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Advanced 高级 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col-lg-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon">
                            <i class="flaticon2-calendar-2"></i>
                        </span>
                        <h3 class="card-head-title">
                            图标按钮
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="card-head-actions">
                            <a href="#" class="btn btn-clean btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-search-1"></i>
                            </a>
                            <a href="#" class="btn btn-clean btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-gear"></i>
                            </a>
                            <a href="#" class="btn btn-clean btn-sm btn-icon btn-icon-md">
                                <i class="flaticon-more-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            下拉按钮
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="card-head-actions">
                            <div class="dropdown dropdown-inline">
                                <a href="#" class="btn btn-default btn-pill btn-sm btn-icon btn-icon-md"
                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="flaticon2-add-1"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <ul class="e-nav">
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <i class="e-nav-link-icon flaticon2-line-chart"></i>
                                                <span class="e-nav-link-text">Reports</span>
                                            </a>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <i class="e-nav-link-icon flaticon2-send"></i>
                                                <span class="e-nav-link-text">Messages</span>
                                            </a>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <i class="e-nav-link-icon flaticon2-pie-chart-1"></i>
                                                <span class="e-nav-link-text">Charts</span>
                                            </a>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <i class="e-nav-link-icon flaticon2-avatar"></i>
                                                <span class="e-nav-link-text">Members</span>
                                            </a>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <i class="e-nav-link-icon flaticon2-settings"></i>
                                                <span class="e-nav-link-text">Settings</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>&nbsp;
                            <div class="dropdown dropdown-inline">
                                <a href="#" class="btn btn-default btn-pill btn-sm btn-icon btn-icon-md"
                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="flaticon2-soft-icons"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <ul class="e-nav">
                                        <li class="e-nav-section e-nav-section--first">
                                            <span class="e-nav-section-text">Finance</span>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <i class="e-nav-link-icon flaticon2-graph-1"></i>
                                                <span class="e-nav-link-text">Statistics</span>
                                            </a>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <i class="e-nav-link-icon flaticon2-calendar-4"></i>
                                                <span class="e-nav-link-text">Events</span>
                                            </a>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <i class="e-nav-link-icon flaticon2-layers-1"></i>
                                                <span class="e-nav-link-text">Reports</span>
                                            </a>
                                        </li>
                                        <li class="e-nav-section e-nav-section--first">
                                            <span class="e-nav-section-text">HR</span>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <i class="e-nav-link-icon flaticon2-calendar-4"></i>
                                                <span class="e-nav-link-text">Notifications</span>
                                            </a>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <i class="e-nav-link-icon flaticon2-file-1"></i>
                                                <span class="e-nav-link-text">Files</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon">
                            <i class="flaticon2-calendar-2"></i>
                        </span>
                        <h3 class="card-head-title">
                            使用边框风格按钮
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="card-head-actions">
                            <a href="#" class="btn btn-outline-success btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-search-1"></i>
                            </a>
                            <a href="#" class="btn btn-outline-danger btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-gear"></i>
                            </a>
                            <a href="#" class="btn btn-outline-brand btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-calendar-5"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon">
                            <i class="flaticon-calendar"></i>
                        </span>
                        <h3 class="card-head-title e-font-primary">
                            使用其他风格按钮
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="card-head-actions">
                            <a href="#" class="btn btn-clean btn-sm">
                                Import
                            </a>
                            <a href="#" class="btn btn-outline-brand btn-sm">
                                Filter
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-lg-6">

            <!--begin::Card-->
            <div class="card card--responsive-mobile">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon">
                            <i class="flaticon-technology e-font-success"></i>
                        </span>
                        <h3 class="card-head-title e-font-brand">
                            自定义标题和工具栏
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                            <button type="button" class="btn btn-brand"><i class="la la-file-text-o"></i></button>
                            <button type="button" class="btn btn-brand"><i class="la la-floppy-o"></i></button>
                            <button type="button" class="btn btn-brand"><i class="la la-header"></i></button>
                            <div class="btn-group" role="group">
                                <button id="btnGroupDrop1" type="button" class="btn btn-brand dropdown-toggle"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Dropdown
                                </button>
                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                    <a class="dropdown-item" href="#">Dropdown link</a>
                                    <a class="dropdown-item" href="#">Dropdown link</a>
                                    <a class="dropdown-item" href="#">Dropdown link</a>
                                    <a class="dropdown-item" href="#">Dropdown link</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card card--responsive-tablet-and-mobile">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            使用Bootstrap Toolbar
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="btn-group btn-group btn-group-pill" role="group" aria-label="...">
                            <button type="button" class="btn btn-brand">Left</button>
                            <button type="button" class="btn btn-brand">Middle</button>
                            <button type="button" class="btn btn-brand">Right</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title e-font-primary">
                            使用其他风格按钮<small>副标题</small>
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="card-head-actions">
                            <a href="#" class="btn btn-outline-brand btn-bold btn-sm">
                                导出
                            </a>
                            <a href="#" class="btn btn-danger btn-sm btn-bold">
                                打印
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon">
                            <i class="flaticon-calendar"></i>
                        </span>
                        <h3 class="card-head-title e-font-primary">
                            使用胶囊风格按钮
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="card-head-actions">
                            <a href="#" class="btn btn-success btn-pill btn-sm">
                                导入
                            </a>
                            <a href="#" class="btn btn-warning btn-pill btn-sm">
                                导出
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->
        </div>
    </div>
    <div class="row">
        <div class="col-xl-4">
            <!--begin::Card-->
            <div class="card card--height-fluid-half">
                <div class="card-body">
                    <div class="card-content">
                        <p>在PC模式下（lg）与右侧面板高度相同</p>
                    </div>
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card card--height-fluid-half">
                <div class="card-body">
                    <div class="card-content">
                        <p>在PC模式下（lg）与右侧面板高度相同</p>
                    </div>
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-xl-4">

            <!--begin::Card-->
            <div class="card card--height-fluid">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon"><i class="flaticon-stopwatch"></i></span>
                        <h3 class="card-head-title">相同高度面板</h3>
                    </div>
                    <div class="card-head-toolbar">
                        工具条
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-content">
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    </div>
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-xl-4">

            <!--begin::Card-->
            <div class="card card--height-fluid">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">相同高度面板</h3>
                    </div>
                    <div class="card-head-toolbar">
                        工具条
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-content">
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    </div>
                </div>
            </div>

            <!--end::Card-->
        </div>
    </div>
    <div class="row">
        <div class="col-xl-4">

            <!--begin::Card-->
            <div class="card card--height-fluid-half">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon"><i class="flaticon-stopwatch"></i></span>
                        <h3 class="card-head-title">相同高度面板</h3>
                    </div>
                    <div class="card-head-toolbar">
                        工具条
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-content">
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    </div>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card card--height-fluid-half">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon"><i class="flaticon-stopwatch"></i></span>
                        <h3 class="card-head-title">相同高度面板</h3>
                    </div>
                    <div class="card-head-toolbar">
                        工具条
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-content">
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    </div>
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-xl-4">

            <!--begin::Card-->
            <div class="card card--height-fluid">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon"><i class="flaticon-stopwatch"></i></span>
                        <h3 class="card-head-title">相同高度面板</h3>
                    </div>
                    <div class="card-head-toolbar">
                        工具条
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-content">
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    </div>
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-xl-4">

            <!--begin::Card-->
            <div class="card card--height-fluid">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">相同高度面板</h3>
                    </div>
                    <div class="card-head-toolbar">
                        工具条
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-content">
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    </div>
                </div>
            </div>

            <!--end::Card-->
        </div>
    </div>
    <div class="row">
        <div class="col-xl-4">

            <!--begin::Card-->
            <div class="card card--solid-brand card--height-fluid">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon"><i class="flaticon-stopwatch"></i></span>
                        <h3 class="card-head-title">品牌色</h3>
                    </div>
                    <div class="card-head-toolbar">
                        工具条
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-content">
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    </div>
                </div>
                <div class="card-foot card-foot--sm e-align-right">
                    <a href="#" class="btn btn-default">取消</a>
                    <a href="#" class="btn btn-brand">保存</a>
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-xl-4">

            <!--begin::Card-->
            <div class="card card--solid-warning cardk-portlet--height-fluid">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon"><i class="flaticon-stopwatch"></i></span>
                        <h3 class="card-head-title">警告</h3>
                    </div>
                    <div class="card-head-toolbar">
                        工具条
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-content">
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    </div>
                </div>
                <div class="card-foot card-foot--sm e-align-right">
                    <a href="#" class="btn btn-default">取消</a>
                    <a href="#" class="btn btn-brand">保存</a>
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-xl-4">

            <!--begin::Card-->
            <div class="card card--solid-success card--height-fluid">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">成功</h3>
                    </div>
                    <div class="card-head-toolbar">
                        工具条
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-content">
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    </div>
                </div>
                <div class="card-foot card-foot--sm e-align-right">
                    <a href="#" class="btn btn-default">取消</a>
                    <a href="#" class="btn btn-brand">保存</a>
                </div>
            </div>
            <!--end::Card-->
        </div>
    </div>
</div>

<div id="scroll-top" class="e-scroll-top">
    <i class="fa fa-arrow-up"></i>
</div>

<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>